<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        {{JS表达式}}  
    -->
    <div id="app">
        <h3>1. {{}}双大括号输出文本内容</h3>
        <!-- 直接获取文本内容 -->
        <p>{{ msg }}</p>
        <!-- 直接执行JS表达式 -->
        <p>{{ sorce + 1 }}</p>
        <h3>一次性插值 v-once</h3>
        <p v-once>{{msg}}</p>
        <h3>指令输出真正的HTML内容 v-html</h3>
        <p>双大括号的形式：{{contentHtml}}</p>
        <p>v-html的形式：<span v-html="contentHtml"></span></p>
        <h3>元素绑定指令 v-bind</h3>
        <!-- 完整 -->
        <img v-bind:src="imgUrl">  
        <!-- 简化 -->
        <img :src="imgUrl">
        <h3>事件绑定指令 v-on</h3>
        <input type="text" value="1" v-model="num">
        <!-- 完整 -->
        <button v-on:click="add">完整点击 +1</button>
        <!-- 简化 -->
        <button @click="add">简化点击 +1</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',  
            data:{  
                msg: '王佳伟，你最棒！' ,
                sorce: 100,
                contentHtml:`<span style="color:red">王佳伟，你最棒！
                    <script>alert("我是大傻逼！")<\/script>
                    </span>`,
                imgUrl:'https://profile.csdnimg.cn/B/9/A/3_weixin_42776111',
                num : 1
            },
            methods:{
                add:function(){
                    this.num ++
                }
            }
        })
    </script>
</body>
</html>